<template>
  <view class="noPay_detail">
    <view class="top">
      <view class="top_line">
        <text class="leixing">待支付尾款</text>
      </view>
      <view class="bottom_line">
        <u-count-down
          :timestamp="orderDetail.balance_time"
          color="#fff"
          separator="zh"
          bg-color="#a084f0"
          separator-color="#fff"
          separator-size="22"
          font-size="22"
        ></u-count-down
        ><text v-if="orderDetail.stage == 1">后开始支付尾款</text
        ><text v-if="orderDetail.stage == 2 || orderDetail.stage == 3"
          >后尾款支付结束</text
        ></view
      >
    </view>
    <view class="message_box">
      <view class="first_box">
        <view class="circular active_circular"></view>
        <view class="contain">
          <view class="top_text active_top_text">定金支付阶段 —— 已完成</view>
          <view class="bottom_text">{{ orderDetail.createtime }}</view>
        </view>
      </view>
      <view class="second_box">
        <view
          class="circular"
          :class="
            orderDetail.stage == 2 || orderDetail.stage == 3
              ? 'active_circular'
              : ''
          "
        ></view>
        <view class="contain">
          <view
            class="top_text"
            :class="
              orderDetail.stage == 2 || orderDetail.stage == 3
                ? 'active_top_text'
                : ''
            "
            >尾款支付阶段<text v-if="orderDetail.stage == 3">
              —— 已完成</text
            ></view
          >
          <view class="bottom_text"
            >{{ orderDetail.balance_start_time_text }}至{{
              orderDetail.balance_end_time_text
            }}</view
          >
        </view>
      </view>
      <view class="third_box">
        <view
          class="circular"
          :class="orderDetail.stage == 3 ? 'active_circular' : ''"
        ></view>
        <view class="contain">
          <view
            class="top_text"
            :class="orderDetail.stage == 3 ? 'active_top_text' : ''"
            >商品入柜阶段<text v-if="orderDetail.stage == 3">
              —— 已完成</text
            ></view
          >
          <view class="bottom_text" v-if="orderDetail.stage != 3"
            >等待支付尾款完成</view
          >
          <view class="bottom_text" v-if="orderDetail.stage == 3"
            >商品已入柜</view
          >
        </view>
      </view>
    </view>
    <view class="detail_box">
      <view
        class="center"
        v-for="(item, index) in orderDetail.item"
        :key="index"
      >
        <view class="img_box">
          <img :src="item.image" alt="" />
        </view>
        <view class="right">
          <view class="right_top">
            <view class="lingpai">
              <img :src="levelImg[item.level_id]" alt="" class="img" />
            </view>
            <view class="title">
              <view class="top_title">{{ item.title }}</view>
              <view class="xilie">{{ item.ip_name }}</view>
            </view>
          </view>
          <view class="right_bottom">
            <view class="jiage">
              <text class="fuhao">￥</text>
              <text class="price">{{ item.price }}</text>
            </view>
            <view class="shu_box">
              <text class="fuhao">x</text>
              <text class="shuliang">{{ item.num }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="price_box">
      <view class="line">
        <view class="left">商品总价</view>
        <view class="right">
          <text class="fuhao">¥</text>
          <text class="price">{{ orderDetail.total_amount }}</text>
        </view>
      </view>
      <view class="line">
        <view class="left">优惠券</view>
        <view class="right">
          <text class="fuhao">-¥</text>
          <text class="price">{{ orderDetail.coupon_fee }}</text>
        </view>
      </view>
      <view class="line">
        <view class="left">实付款</view>
        <view class="right">
          <text class="red_fuhao">¥</text>
          <text class="red_price">{{ orderDetail.pay_fee }}</text>
        </view>
      </view>
    </view>
    <view class="order_box">
      <view class="line">
        <view class="left">订单编号</view>
        <view class="right">{{ orderDetail.order_sn }}</view>
      </view>
      <view class="line">
        <view class="left">下单时间</view>
        <view class="right">{{ orderDetail.createtime }}</view>
      </view>
      <view class="line">
        <view class="left">付款时间</view>
        <view class="right" v-if="orderDetail.stage == 1">未到付款时间</view>
        <view class="right" v-if="orderDetail.stage == 2">未付款</view>
        <view class="right" v-if="orderDetail.stage == 3">已付款</view>
      </view>
    </view>
    <view class="bottom_box">
      <view
        class="bottom_btn"
        @click="CreateBalanceOrder"
        v-if="orderDetail.stage == 2"
        >支付尾款</view
      >
      <view class="top_tips" v-if="orderDetail.stage == 1">
        <u-icon name="error-circle" color="#FDFDFD" size="32"></u-icon>
        <view class="text">未到付尾款时间欧，请耐心等待~</view>
        <u-icon name="close" color="#FDFDFD" size="28"></u-icon>
      </view>
      <view class="gray_bottom_btn" v-if="orderDetail.stage == 1"
        >无法支付尾款欧~</view
      >
    </view>
    <shopro-pay-model
      @change-pay-mod="changePayMod"
      @payed="onPayed"
      v-if="payModOpen"
      activity-type="direct_goods"
      :details="payDetails"
    ></shopro-pay-model>
  </view>
</template>
<script>
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(300);
import le1 from './images/le1.png';
import le2 from './images/le2.png';
import le3 from './images/le3.png';
import le4 from './images/le4.png';
import le5 from './images/le5.png';
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',

  data: () => ({
    orderDetail: {},
    //通过ID控制令牌的底板颜色
    levelImg: {
      1: le1,
      2: le2,
      3: le3,
      4: le4,
      5: le5,
    },
    payDetails: {},
    payModOpen: false,
  }),
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  onLoad() {},
  mounted() {},
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {
    this.getOrderDetail();
  },
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    ...mapMutations(['CartOnshow']),
    // 订单详情
    getOrderDetail() {
      this.$http('v1.getOrderDetail', {
        id: this.$Route.query.id,
      }).then((res) => {
        if (res.code === 1) {
          this.orderDetail = res.data;
        }
      });
    },
    //创建支付尾款订单
    CreateBalanceOrder() {
      _delay(() => {
        this.$http(
          'v1.createOrder',
          {
            activity_type: 'prepare_balance',
            order_sn: this.orderDetail.order_sn,
            goods_id: this.orderDetail.item[0].id,
            goods_num: this.orderDetail.item[0].num,
          },
          '加载中'
        ).then((res) => {
          if (res.code === 1) {
            this.payModOpen = true;
            this.payDetails.total_amount = res.data.total_amount;
            this.payDetails.discounts_amount = res.data.discounts_amount;
            this.payDetails.original_amount = res.data.original_amount;
            this.payDetails.order_sn = res.data.order_sn;
            this.payDetails.money = res.data.money;
          }
        });
      });
    },
    // 显示隐藏支付
    changePayMod(ev) {
      this.payModOpen = ev;
      this.payDetails = {};
    },
    //支付结果
    onPayed() {
      this.payModOpen = false;
      this.CartOnshow(true);
      this.getOrderDetail();
      uni.showToast({
        title: '支付成功',
        duration: 2000,
        icon: 'success',
        success: (res) => {},
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.noPay_detail {
  padding-bottom: 170rpx;
  .top {
    width: 750rpx;
    height: 200rpx;
    background-color: #a084f0;
    padding-left: 62rpx;
    padding-top: 42rpx;
    border-radius: 0rpx 0rpx 20rpx 20rpx;
    .top_line {
      .leixing {
        font-size: 40rpx;
        font-family: PingFang SC-Heavy, PingFang SC;
        font-weight: 700;
        color: #ffffff;
      }
      .kuaidi {
        font-size: 22rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }
    }
    .bottom_line {
      font-size: 22rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-top: 18rpx;
    }
  }
  .message_box {
    width: 690rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: -30rpx 30rpx 0;
    padding: 0 73rpx;
    .first_box {
      width: 100%;
      height: 130rpx;
      display: flex;
      align-items: center;
      .circular {
        width: 22rpx;
        height: 22rpx;
        border-radius: 50%;
        border: 1rpx solid #ffffff;
        background: #b5b5b5;
        position: relative;
        right: 12rpx;
        box-shadow: 0 0 2rpx 2rpx #b5b5b5;
      }
      .contain {
        margin-left: 48rpx;
        .top_text {
          font-size: 24rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 400;
          color: #939393;
          margin-bottom: 12rpx;
        }
        .bottom_text {
          font-size: 22rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 400;
          color: #b5b5b5;
        }
      }
    }
    .second_box {
      width: 100%;
      height: 130rpx;
      display: flex;
      align-items: center;
      border-top: 1rpx solid #f7f6f7;
      border-bottom: 1rpx solid #f7f6f7;
      .circular {
        width: 22rpx;
        height: 22rpx;
        border-radius: 50%;
        border: 1rpx solid #ffffff;
        background: #b5b5b5;
        position: relative;
        right: 12rpx;
        box-shadow: 0 0 2rpx 2rpx #b5b5b5;
        &::before {
          content: '';
          position: absolute;
          width: 1rpx;
          height: 78rpx;
          background-color: #b5b5b5;
          opacity: 0.5;
          bottom: 36rpx;
          left: 48%;
        }
        &::after {
          content: '';
          position: absolute;
          width: 1rpx;
          height: 78rpx;
          background-color: #b5b5b5;
          opacity: 0.5;
          top: 36rpx;
          left: 48%;
        }
      }
      .contain {
        margin-left: 48rpx;
        .top_text {
          font-size: 24rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 400;
          color: #939393;
          margin-bottom: 12rpx;
        }
        .bottom_text {
          font-size: 22rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 400;
          color: #b5b5b5;
        }
      }
    }
    .third_box {
      width: 100%;
      height: 130rpx;
      display: flex;
      align-items: center;
      .circular {
        width: 22rpx;
        height: 22rpx;
        border-radius: 50%;
        border: 1rpx solid #ffffff;
        background: #b5b5b5;
        position: relative;
        right: 12rpx;
        box-shadow: 0 0 2rpx 2rpx #b5b5b5;
      }
      .contain {
        margin-left: 48rpx;
        .top_text {
          font-size: 24rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 400;
          color: #939393;
          margin-bottom: 12rpx;
        }
        .bottom_text {
          font-size: 22rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 400;
          color: #b5b5b5;
        }
      }
    }
    .active_circular {
      background: #a084f0 !important;
      box-shadow: 0 0 2rpx 2rpx #a084f0 !important;
    }
    .active_top_text {
      color: #a084f0 !important;
    }
  }
  .detail_box {
    width: 690rpx;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
    border-radius: 20rpx;
    margin: 18rpx 30rpx;
    padding-right: 32rpx;
    padding-left: 38rpx;
    padding-bottom: 33rpx;
    .center {
      height: 180rpx;
      width: 100%;
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #dadada;
      background-color: #fff;
      .img_box {
        width: 122rpx;
        height: 122rpx;
        img {
          width: 100%;
          height: 100%;
          border-radius: 10rpx;
        }
      }
      .right {
        flex: 1;
        margin-left: 20rpx;
        .right_top {
          display: flex;
          .lingpai {
            position: relative;
            width: 35rpx;
            height: 49rpx;
            img {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translateX(-50%) translateY(-50%) scale(0.96);
              width: 100%;
              height: 100%;
            }
            text {
              position: relative;
              z-index: 1;
              width: 100%;
              height: 100%;
              font-size: 18rpx;
              font-family: FZShaoEr-M11S-Regular, FZShaoEr-M11S;
              font-weight: 400;
              color: #ffffff;
              text-align: center;
              line-height: 49rpx;
              display: block;
            }
          }
          .title {
            flex: 1;
            margin-left: 10rpx;
            .top_title {
              font-size: 28rpx;
              font-family: Source Han Sans CN-Normal, Source Han Sans CN;
              font-weight: 700;
              color: #111111;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 400rpx;
            }
            .xilie {
              font-size: 18rpx;
              font-family: Source Han Sans CN-Normal, Source Han Sans CN;
              font-weight: 350;
              color: #666666;
            }
          }
        }
        .right_bottom {
          display: flex;
          justify-content: space-between;
          margin-top: 26rpx;
          .jiage {
            .fuhao {
              font-size: 28rpx;
              font-family: Source Han Sans CN-Normal, Source Han Sans CN;
              font-weight: 350;
              color: #de3249;
            }
            .price {
              font-size: 28rpx;
              font-family: DIN-Bold;
              font-weight: 700;
              color: #de3249;
            }
          }
          .shu_box {
            display: flex;
            justify-content: flex-end;
            .fuhao {
              font-size: 20rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 400;
              color: #3d3d3d;
            }
            .shuliang {
              font-size: 24rpx;
              font-family: Oswald-Regular, Oswald;
              font-weight: 400;
              color: #3d3d3d;
            }
          }
        }
      }
    }
  }
  .price_box {
    width: 690rpx;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 0 30rpx 18rpx;
    padding-top: 16rpx;
    padding-right: 28rpx;
    padding-left: 28rpx;
    .line {
      width: 100%;
      height: 60rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        font-size: 22rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 700;
        color: #3d3d3d;
      }
      .right {
        .fuhao {
          font-size: 28rpx;
          font-family: Source Han Sans CN-Normal, Source Han Sans CN;
          font-weight: 350;
          color: #979797;
        }
        .price {
          font-size: 28rpx;
          font-family: Source Han Sans CN-Normal, Source Han Sans CN;
          font-weight: 700;
          color: #979797;
        }
        .red_fuhao {
          font-size: 28rpx;
          font-family: Source Han Sans CN-Normal, Source Han Sans CN;
          font-weight: 350;
          color: #de3249;
        }
        .red_price {
          font-size: 28rpx;
          font-family: Source Han Sans CN-Normal, Source Han Sans CN;
          font-weight: 700;
          color: #de3249;
        }
      }
    }
  }
  .order_box {
    width: 690rpx;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 0 30rpx 10rpx;
    padding-top: 16rpx;
    padding-right: 28rpx;
    padding-left: 28rpx;
    .line {
      width: 100%;
      height: 60rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        font-size: 22rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 700;
        color: #3d3d3d;
      }
      .right {
        font-size: 22rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 400;
        color: #939393;
      }
    }
  }
  .bottom_box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    .bottom_btn {
      width: 690rpx;
      height: 80rpx;
      margin: 16rpx 30rpx 10rpx;
      background: #a084f0;
      border-radius: 168rpx 168rpx 168rpx 168rpx;
      font-size: 30rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 80rpx;
      text-align: center;
    }
    .gray_bottom_btn {
      width: 690rpx;
      height: 80rpx;
      margin: 16rpx 30rpx 10rpx;
      background: #b5b5b5;
      border-radius: 168rpx 168rpx 168rpx 168rpx;
      font-size: 30rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 80rpx;
      text-align: center;
    }
    .top_tips {
      width: 100%;
      height: 70rpx;
      background: #e0727f;
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      .text {
        flex: 1;
        font-size: 20rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 400;
        color: #fdfdfd;
        height: 70rpx;
        line-height: 70rpx;
        padding-left: 36rpx;
      }
    }
  }
}
</style>
